<!--  -->
<template>
  <div>
    <el-row>
      <el-select v-model="rules" multiple placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="showRuleUnit">查看</el-button>
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增</el-button
      >

      <el-dialog title="新建规则" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="规则名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标签组合" :label-width="formLabelWidth">
            <el-select v-model="form.tags" multiple placeholder="新增标签">
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value + '#' + item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRule">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
    <div v-for="(key, i) in ruleDetails">
      <RuleUnit
        @innerDelete="deleteRuleCom"
        :ruleData="key"
        :topic="topic"
        :number="i"
        class="unit"
      />
    </div>
    <el-row> </el-row>
  </div>
</template>

<script>
import RuleUnit from "@/components/Rule/RuleUnit";
export default {
  props: ["topic"],

  data() {
    return {
      options: [],
      rules: [],

      ruleDetails: [],

      dialogFormVisible: false,

      tags: "",

      form: {
        name: "",
        tags: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },

  methods: {
    showRuleUnit() {
      console.log(this.rules);
      var query = this.rules.toString();
      this.$axios({
        url: "http://" + this.$config.server_ip + ":5004/get_rulescontent",
        method: "get",
        params: { ids: query },
      }).then((res) => {
        console.log(res.data);
        this.ruleDetails = res.data;
      });
    },

    addRule() {
      console.log("add a rule");
      this.$axios.post(
        "http://" + this.$config.server_ip + ":5004/add_rule",
        this.form
      );

      //flush
      this.$axios({
        url: "http://" + this.$config.server_ip + ":5004/get_rules",
        method: "get",
        params: { topic: this.topic },
      }).then((res) => {
        console.log(res.data);
        this.options = res.data;
      });
      this.dialogFormVisible = false;
    },

    deleteRuleCom(key) {
      console.log(key);
      this.ruleDetails.splice(key, 1);
    },
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log("zheli");
    this.$axios({
      url: "http://" + this.$config.server_ip + ":5004/get_rules",
      method: "get",
      params: { topic: this.topic },
    }).then((res) => {
      console.log(res.data);
      this.options = res.data;
    });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$axios({
      url: "http://" + this.$config.server_ip + ":5002/get_tags",
      method: "get",
      params: { topic: this.topic },
    }).then((res) => {
      console.log(res.data);
      this.tags = res.data;
    });
  },

  components: {
    RuleUnit: RuleUnit,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.el-select {
  margin-right: 40px;
  width: 400px;
}

.el-button {
  width: 100px;
}

.unit {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>